import React, { useState } from 'react';
import AnimatedTransition from '../AnimatedTransition';
import { useLocation, useNavigate } from 'react-router-dom';
import ProductCarousel from '../compages/ProductCarousel';
import './styleCss/Purchase.scss';
import { Button, Toast } from 'antd-mobile';

const Purchase = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    // 获取传递过来的商品数据
    const product = location.state?.product;

    if (!product) return <div>无商品数据</div>

    const handlePurchase = () => {
        setLoading(true);
        // 模拟购买操作
        setTimeout(() => {
            setLoading(false);
            Toast.show({
                content: '购买成功!',
                duration: 1000,
            });
            // 跳转到Article页面并传递商店信息
            navigate('/Article', {
                state: {
                    shopInfo:{
                        address: '河北省,邯郸市,成安县,李家疃镇,抹疃村',
                    }
                }
            })
        }, 1500);
    }
    const handlePurchase1 = () => {
        setLoading(true);
        // 模拟购买操作
        setTimeout(() => {
            setLoading(false);
            Toast.show({
                content: '购买成功!',
                duration: 1000,
            });
            // 跳转到Article页面并传递商店信息
            navigate('/Article', {
                state: {
                    shopInfo:{
                        address: '保定市，莲池区，保定科技学院图书馆'
                    }
                }
            })
        }, 1500);
    }
    const handlePurchase2 = () => {
        setLoading(true);
        // 模拟购买操作
        setTimeout(() => {
            setLoading(false);
            Toast.show({
                content: '购买成功!',
                duration: 1000,
            });
            // 跳转到Article页面并传递商店信息
            navigate('/Article', {
                state: {
                    shopInfo:{
                        address: '新疆，阿勒泰地区，哈巴河县，喀纳斯景区'
                    }
                }
            })
        }, 1500);
    }

    return (
        <AnimatedTransition>
            <div className='purchase-container'>
                <ProductCarousel images={product.images} height={200} />
                <h3 className="purchase-title">{product.title}</h3>
                <p className='purchase-price'>￥{product.price}</p>
                <p className="purchase-desc">{product.context}</p>
                <Button loading={loading} onClick={handlePurchase}>购买1</Button>
                <Button loading={loading} onClick={handlePurchase1}>购买2</Button>
                <Button loading={loading} onClick={handlePurchase2}>购买3</Button>
            </div>
        </AnimatedTransition>
    )
}

export default Purchase;